<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import ExportButton from '@/template/page/common/ExportButton.vue'
import * as BasicApi from '@/api'
import { objectToQueryParams } from '@/utils/objectToQuery'
import { Refresh, Connection } from '@element-plus/icons-vue'

import { useMessage } from '@/hooks/useMessage'
import eventBus from '@/libs/eventBus'
const message = useMessage()

const props = defineProps(['partParams', 'selectedList'])

const formQuery = {
  type: '',
  key: '',
  keyType: 'text',
  value: '',
  date: ''
}
const queryParams = reactive({
  type: '',
  key: '',
  keyType: 'text',
  value: '',
  date: '',
  list: []
})

const emit = defineEmits(['getData', 'getTableData'])

//日期控件
const date = ref()
const dateRange = ref()
const dateTimeRange = ref()
//下拉框控件
const select = ref()
const multiSelect = ref()

//重置
function handleReset() {
  //将表单置空
  Object.assign(queryParams, formQuery)
  //清空值的下拉框数据
  valueList.value = []
}

//获取类型
const typeList = ref<any[]>([])
const getTypeList = async () => {
  const params = {
    ...props.partParams,
    operType: 'GetType'
  }
  const inputStr = objectToQueryParams(params)
  const result = (await BasicApi.Query({ inputStr })) as any
  const { code, msg, data } = result
  if (code !== 200) {
    message.error(msg)
    return
  }
  typeList.value = data.listInfo || []
}

//获取条件
const keyList = ref<any[]>([])
const getKeyList = async () => {
  const params = {
    ...props.partParams,
    type: queryParams.type,
    operType: 'GetKey'
  }
  const inputStr = objectToQueryParams(params)
  const result = (await BasicApi.Query({ inputStr })) as any
  const { code, msg, data } = result
  if (code !== 200) {
    message.error(msg)
    return
  }
  keyList.value = data.listInfo || []
}

function changeType() {
  queryParams.key = ''
  keyList.value = []
  queryParams.keyType = ''
  queryParams.value = ''
  valueList.value = []
  if (!queryParams.type) {
    return
  }
  getKeyList()
}

function changeKey() {
  queryParams.value = ''
  if (!queryParams.key) {
    return
  }
  //先获取Key的Type
  const result = keyList.value.filter((item) => item.Value === queryParams.key)
  queryParams.keyType = (result.length && result[0].ValueType) || 'text'
  //如果Type为select则要去获取下拉框数据
  if (queryParams.keyType == 'Select') {
    getValueList()
  }
}

//获取值
const valueList = ref<any[]>([])
const getValueList = async () => {
  const post = {
    ...props.partParams,
    type: queryParams.type,
    key: queryParams.key,
    operType: 'GetValue'
  }
  const inputStr = objectToQueryParams(post)
  const result = (await BasicApi.Query({ inputStr })) as any
  const { code, msg, data } = result
  if (code !== 200) {
    message.error(msg)
    return
  }
  valueList.value = data.listInfo || []
}

//是否有类型
const isShowType = ref(false)
//获取筛选项
const filterInfo = ref<any[]>([]) // 列表的数据
const buttonInfo = ref<any[]>([])

const pageInfo = ref()
const getFilter = async () => {
  const post = {
    groupName: props.partParams.groupName,
    jobType: props.partParams.jobType,
    operType: 'GetPageInfo'
  }
  const inputStr = objectToQueryParams(post)
  const result = (await BasicApi.Query({ inputStr, jsonData: '' })) as any
  const { code, msg, data } = result
  if (code !== 200) {
    message.error(msg)
    return
  }
  pageInfo.value = data
  const { filter, operate } = data.pageInfo
  filterInfo.value = filter
  buttonInfo.value = operate
  //将result传递给table 1.获取表头信息fieldInfo 2.获取行操作按钮
  emit('getTableData', data)
}

const jobType = computed(() => {
  return props.partParams.jobType
})
const onAdd = () => {
  //通知表格新增行
  eventBus.emit(`addOP4Row-${jobType.value}`)
}

const list = ref([])
const listUpdated = (data: any) => {
  list.value = data
}
eventBus.on(`OP4ListUpdated-${jobType.value}`, listUpdated)

const headList = ref([])
const headListUpdated = (data: any) => {
  headList.value = data
}
eventBus.on(`OP4HeadListUpdated-${jobType.value}`, headListUpdated)

//将表格还原初始化并把mask隐藏
const onReset = () => {
  eventBus.emit(`OP4ResetData-${jobType.value}`)
  eventBus.emit(`OP4ShowMask-${jobType.value}`, false)
}

const onSubmit = async (value: string, label: string) => {
  try {
    const inputStr = objectToQueryParams({
      groupName: props.partParams.groupName,
      jobType: props.partParams.jobType,
      operType: value
    })
    const post = {
      inputStr,
      jsonData: {
        headInfo: headList.value || [],
        listInfo: list.value || []
      }
    }
    const res = (await BasicApi.Push(post)) as any
    if (res.code !== 200) {
      message.error(res.msg)
      return
    }
    message.success(res.msg)
    //将页面置灰色
    eventBus.emit(`OP4ShowMask-${jobType.value}`, true)
    const name = label + '单'
    //打开父组件的详情Tab
    eventBus.emit(`addOP4DetailTab-${jobType.value}`, {data: {}, label: name, value})
    setTimeout(() => {
      //并通知详情页渲染
      eventBus.emit(`getOP4DetailField-${jobType.value}`, pageInfo.value)
      eventBus.emit(`getOP4DetailList-${jobType.value}`, res.data)
    }, 0)
    //跳转到详情
  } finally {
    console.log('')
  }
}

onMounted(async () => {
  await getFilter()
  // isShowType.value ? getTypeList() : getKeyList()
})
</script>
<template>
  <div class="flex justify-end">
    <template v-for="item in filterInfo" :key="item.value">
    <el-button class="my-btn btn-add" plain :icon="Refresh" @click="onReset"> {{ item.label}} </el-button>
    </template>
    <template v-for="item in buttonInfo" :key="item.value">
    <el-button class="my-btn" type="success" :icon="Connection" @click="onSubmit(item.value, item.label)"> {{ item.label}} </el-button>
    </template>
  </div>
</template>
<style lang="less" scoped>
.el-form {
  position: relative;
  .my-btn {
    position: absolute;
    top: 0;
    right: 0;
  }
  .btn-add {
    right: 92px;
  }
}
</style>
